import { useState, useEffect, useRef } from "react";
import { useRequest } from "ahooks";
import { AdviseDeApi, uploadAdviseApi } from "@/api/advise";
import { useParams } from "umi";
import RichEditor from "@/commpoent/fwb";
import { ProCard, ProFormInstance, ProFormText, StepsForm } from "@ant-design/pro-components";
import { Cascader, Form, Upload, UploadFile, message } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { baseURL } from "@/api/request";

const options = [
    {
        value: '服务意见',
        label: '服务意见',
        children: [
            {
                value: '态度意见',
                label: '态度意见',
                children: [
                    {
                        value: '态度较差',
                        label: '态度较差',
                    },
                    {
                        value: '态度恶劣',
                        label: '态度恶劣',
                    },
                    {
                        value: '态度良好',
                        label: '态度良好',
                    },
                ],
            },
            {
                value: '广告意见',
                label: '广告意见',
                children: [
                    {
                        value: '广告太多',
                        label: '广告太多',
                    },
                    {
                        value: '广告太少',
                        label: '广告太少',
                    },
                    {
                        value: '广告垃圾',
                        label: '广告垃圾',
                    },
                ],
            },
        ],
    },
    {
        value: '开发意见',
        label: '开发意见',
        children: [
            {
                value: 'App意见',
                label: 'App意见',
                children: [
                    {
                        value: 'App页面',
                        label: 'App页面',
                    },
                    {
                        value: 'App功能',
                        label: 'App功能',
                    },
                    {
                        value: 'App性能',
                        label: 'App性能',
                    },
                ],
            },
            {
                value: '管理系统意见',
                label: '管理系统意见',
                children: [
                    {
                        value: '功能简单',
                        label: '功能简单',
                    },
                    {
                        value: '功能混乱',
                        label: '功能混乱',
                    },
                    {
                        value: '功能太少',
                        label: '功能太少',
                    },
                ],
            },
        ],
    },
    {
        value: '旅游意见',
        label: '旅游意见',
        children: [
            {
                value: '其他意见',
                label: '其他意见',
                children: [
                    {
                        value: '没有意见',
                        label: '没有意见',
                    },
                    {
                        value: '设计完美',
                        label: '设计完美',
                    },
                ],
            },
            {
                value: '没有酒店推送',
                label: '没有酒店推送',
            },
            {
                value: '攻略不全',
                label: '攻略不全',
            }
        ],
    }
];
const AdviseUpload = () => {
    const params: { id: string } = useParams()
    const getData = useRequest(AdviseDeApi, {
        manual: true,
        onSuccess: (res) => {
            console.log(res);
            formRef.current?.setFieldValue('title', res.result.title)
            formRef.current?.setFieldValue('type', res.result.type)
            formRef.current?.setFieldValue("desc", res.result.desc)
            setContent(res.result.content)
            setFileList([{
                uid: '-1',
                name: 'image.png',
                status: 'done', url: res.result.desc.replace(/public/, baseURL)
            }])
        }
    })
    const [fileList, setFileList] = useState<UploadFile[]>([
        {
            uid: '-1',
            name: 'image.png',
            status: 'done',
            url: '',
        },
    ]);
    useEffect(() => {
        getData.run(params.id)
    }, [])
    const [steps, setSteps] = useState(false)
    const formRef = useRef<ProFormInstance>();
    const [content, setContent] = useState<any>('')
    const [obj, setObj] = useState<objApi & { _id: string }>({ content: '', title: '', desc: '', type: [], _id: params.id })
    const normFile = async (e: any) => {
        console.log(e);
        
        let y = await e.file.response
        formRef.current?.setFieldValue('desc', y?.path)
        console.log(y);
        
        setFileList(e.fileList)
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };
    return (<ProCard>
        <StepsForm<{
            name: string;
        }>
            formRef={formRef}
            onFinish={async () => {
                let res = await uploadAdviseApi(obj);
                console.log(res);

                formRef.current?.resetFields()
                message.success('提交成功');
                history.go(-1)
                return true
            }}
            formProps={{
                validateMessages: {
                    required: '此项为必填项',
                },
            }}
        >

            <StepsForm.StepForm<{
                name: string;
            }>
                name="base"
                title="第一步"
                stepProps={{
                    description: '认真填写意见标题和分类',
                }}
                onFinish={async () => {
                    setObj({ ...obj, ...formRef.current?.getFieldsValue() })
                    console.log(content);
                    setSteps(true)
                    return true;
                }}
            >
                <ProFormText
                    name="title"
                    label="标题"
                    width="md"
                    placeholder="请输入"
                    rules={[{ required: true }]}
                />

                <Form.Item name="type" label="分类" rules={[{ required: true, message: '请选择类型' }]}>
                    <Cascader options={options} />
                </Form.Item>
                <Form.Item label="图片选择" name="desc" getValueFromEvent={normFile} rules={[{ required: true, message: '请选择图片' }]}>
                    <Upload action={baseURL + '/pro/uplodafile'} maxCount={1} listType="picture-card"  fileList={fileList}>
                        <div>
                            <PlusOutlined />
                            <div style={{ marginTop: 8 }}>Upload</div>
                        </div>
                    </Upload>
                </Form.Item>
            </StepsForm.StepForm>
            <StepsForm.StepForm<{
                checkbox: string;
            }>
                name="content"
                title="第二步"
                stepProps={{
                    description: '添加意见内容',
                }}
                onFinish={async () => {
                    setObj({ ...obj, content: content })
                    return true;
                }}
            >
                {steps && <RichEditor getContent={setContent} content={content}  ></RichEditor>}
            </StepsForm.StepForm>
            <StepsForm.StepForm
                name="time"
                title="第三步"
                stepProps={{
                    description: '请提交宝贵意见',
                }}
            >
            </StepsForm.StepForm>
        </StepsForm>

    </ProCard>
    )
}

export default AdviseUpload